<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .outer{
            width: 600px;
            height: 400px;
            border: 1px solid #000;
            overflow: hidden;
            position: relative;
            margin: 100px auto;
        }
        .outer div{
            position: absolute;

            width: 5400px;
            height: 400px;
        }
        .outer img{
            display: block;
            width: 600px;
            height: 400px;
            float: left;
        }
    </style>
</head>
<body>
<div class="outer">
    <div id="box">
        <img src="img/1.jpg" alt="">
        <img src="img/2.jpg" alt="">
        <img src="img/3.jpg" alt="">
        <img src="img/4.jpg" alt="">
        <img src="img/5.jpg" alt="">
        <img src="img/6.jpg" alt="">
        <img src="img/9.jpg" alt="">
        <img src="img/8.jpg" alt="">
    </div>
</div>

<script type="text/javascript">
    var box = document.getElementById("box");
    var left = 0;
    //每隔20ms执行一次传递的函数
    setInterval(function () {
        left = left - 8;
        box.style.left = left + "px";
        if(left <= -4200){
            left = -600;
        }
    }, 20);
</script>
</body>
</html>